<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="shortcut icon" href="./img/icon.png"/>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./img/font/iconfont.css">
</head>
<body>
    <div class="header-container"></div>
    <div class="HUA">
        <ul>
            <li>
                <i class="iconfont icon-shoucang"></i>
                <a href="#">我的收藏</a>
            </li>
            <li>
                <i class="iconfont icon-wodezuji"></i>
                <a href="#">我的足迹</a>
            </li>
            <li>
                <i class="iconfont icon-saoyisao"></i>
                <a href="#">下载APP</a>
            </li>
            <li>
                <i class="iconfont icon-kefu"></i>
                <a href="#">联系客服</a>
            </li>
            <li>
                <i class="iconfont icon-huidaodingbuxianxing "></i>
                <a href="#">回到顶部</a>
            </li>
        </ul>
    </div>
    
    <main>
        <div class="logo">
            <div class="all">
                <div class="all-left"><img src="./img/logo.png" ></div>
                <div class="all-center">
                    <div class="box1">
                        <!-- <ul>
                            <li class="li-1"><a href="#">商品</a></li>
                            <li class="li-2"><a href="#">店铺</a></li>
                        </ul> -->
                        <select>
                            <option value="">
                                <a href="#">商品</a>
                            </option>
                            <option value="">
                                <a href="#">店铺</a>
                            </option>
                        </select>
                        <input type="text" placeholder="请输入您要搜索的关键字" class="clearInput search-input"/>
                        <button class="search">搜索</button>
                    </div>
                    <ul class="search-ul"></ul>
                    <div class="box2">
                        <ul>
                            <li><a href="#">电动牙刷</a></li>
                            <li><a href="#">冰白葡萄酒女士</a></li>
                            <li><a href="#">红酒</a></li>
                            <li><a href="#">冰糖</a></li>
                            <li><a href="#">内裤</a></li>
                            <li><a href="#">风扇</a></li>
                            <li><a href="#">面条机</a></li>
                            <li><a href="#">卫生巾透气</a></li>
                            <li><a href="#">面条锅</a></li>
                        </ul>
                    </div>
                </div>
                <div class="all-right">
                    <span>0</span>
                    <a href="http://127.0.0.1:2113/html/cart.html"><i class="iconfont icon-gouwuche"></i>我的购物车</a>
                </div>
            </div>
        </div>
        <div class="small-box">
            <div class="sl">
                <img src="./img/all_list.png"/>
                <span>全部商品分类</span>
            </div>
            <div class="sr">
                <span>购一次&nbsp;&nbsp;美一次</span>
            </div>
        </div>
        <div class="banner">
            <a href="" class="pic-slide">
                <img src="https://resource.amez999.com/app/familyActivity/2021/07/05/YHzcD37yNyaipNi5.png" alt="" class="slide">
            </a>
            <div class="con">
                <div class="con-left">
                    <ul>
                        <li><a href="#">服务类</a></li>
                        <li><a href="#">美容护肤</a></li>
                        <li><a href="#">甄选彩妆</a></li>
                        <li><a href="./html/world.html">全球购</a></li>
                        <li><a href="#">美康专护</a></li>
                        <li><a href="#">人气香氛</a></li>
                        <li><a href="#">个人护理</a></li>
                        <li><a href="#">营养健康</a></li>
                        <li><a href="#">母婴专区</a></li>
                        <li><a href="#">服饰鞋帽</a></li>
                        <li><a href="#">精选箱包</a></li>
                        <li><a href="#">品质家具</a></li>
                        <li><a href="#">数码科技</a></li>
                    </ul>
                </div>
                <div class="con-right">
                    <div class="cr1">
                        <img src="./img/4.png"/>
                        <p>Hi，欢迎来到美域甄品！</p>
                        <a href="./html/login.html">
                            <button class="btn1">登陆</button>
                        </a>
                        <a href="./html/login.html">
                            <button class="btn2">注册</button>
                        </a>
                    </div>
                    <div class="cr2">
                        <img src="./img/3.png"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="list-juan">
            <div class="juan">
                <div class="juan-left">
                    <img src="./img/gw.png" />
                </div>
                <div class="juan-right">
                    <ul>
                        <li>
                            <h5>黄金头疗</h5>
                            <p>美容品牌券</p>
                            <span>￥138</span>
                            <b>韵美品牌门店可用</b>
                            <button>即刻领取美容卷</button>
                            <i>购物满69元可免费领取</i>
                        </li>
                        <li>
                            <h5>乳腺疏通</h5>
                            <p>美容品牌券</p>
                            <span>￥368</span>
                            <b>韵美品牌门店可用</b>
                            <button>即刻领取美容卷</button>
                            <i>购物满69元可免费领取</i>
                        </li>
                        <li>
                            <h5>暖宫护巢</h5>
                            <p>美容品牌券</p>
                            <span>￥368</span>
                            <b>韵美品牌门店可用</b>
                            <button>即刻领取美容卷</button>
                            <i>购物满69元可免费领取</i>
                        </li>
                        <li>
                            <h5>眼部护理</h5>
                            <p>美容品牌券</p>
                            <span>￥280</span>
                            <b>韵美品牌门店可用</b>
                            <button>即刻领取美容卷</button>
                            <i>购物满69元可免费领取</i>
                        </li>
                        <li>
                            <h5>面部护理</h5>
                            <p>美容品牌券</p>
                            <span>￥69</span>
                            <b>韵美品牌门店可用</b>
                            <button>即刻领取美容卷</button>
                            <i>购物满69元可免费领取</i>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <section>
            <ul></ul>
        </section>
    </main>
    <div class="footer-container"></div>
    <script src="libs/jquery.min.js"></script>
    <script>
        $('.header-container').load('./html/header.html')
        $('.footer-container').load('./html/footer.html')
    </script>
    <script>
        const img = [
            'https://resource.amez999.com/app/familyActivity/2021/07/05/YHzcD37yNyaipNi5.png',
            'https://resource.amez999.com/app/familyActivity/2021/07/05/ikaEKANHYwE6jrik.png'
        ]
        let currentIndex = 0
        setInterval(function(){
            currentIndex += 1
            if(currentIndex>=img.length){
                currentIndex = 0
            }
            document.querySelector('.slide').src = img[currentIndex]
        },3000)
    </script>
    <script src="js/ajax.js"></script>
    <script src="js/index.js"></script>
    <script src="js/jsonp.js"></script>


    <!-- 这是搜索框 -->
    <script>
        let container = document.querySelector('.search-ul')
        let search = document.querySelector('.search-input')
        function fn(res){
            container.innerHTML = ''
            res.s.forEach((item)=>{
                container.innerHTML += `
                    <li>${item}</li>
                `
            })
        }
        
        //当咱们输入内容的时候触发这个事件，发送请求返回内容
        onkeyup = ()=>{
            container.innerHTML = ''
            let wd = search.value
            if(wd.trim().length == 0){
                container.innerHTML = ''
                return
            }
            jsonp(`https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?cb=fn&wd=${wd}`)
        }
    </script>
</body>
</html>